<template>
  <el-dialog
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="60%">

    <template v-if="isView">
      <!--startprint-->
      <div id="print" style="width: 756px">

        <el-card>
          <div slot="header">
            <span>盘库订单</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="doPrint()">打印</el-button>
          </div>
          <el-row type="flex" :gutter="20" style="height: 120px" justify="space-around">
            <el-col :span="12">
              订单号：
              <span style="color: red;font-size: 18px;font-weight: bolder">{{dataView.orderNo}}</span>
            </el-col>
            <el-col :span="12">
              <div id="printcode" style="position: absolute">
                <img v-if="barcodeUrl != ''" style="width: 100%;" v-bind:src="barcodeUrl"/>
              </div>
            </el-col>
          </el-row>
          <el-form label-width="80px">
            <el-form-item label="物料详情">
              <template>
                <el-table
                  :data="dataView.orderItems"
                  border
                  style="width: 100%">
                  <el-table-column
                    prop="name"
                    label="名称"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="itemGuid"
                    label="条码"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="batchNo"
                    label="批次号"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="quantity"
                    label="数量"
                  >

                  </el-table-column>
                  <el-table-column
                    prop="unit"
                    label="单位"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="trueQuantity"
                    label="实际盘点数量"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="areaCode"
                    label="库位编号"
                  >
                  </el-table-column>
                </el-table>
              </template>
            </el-form-item>
          </el-form>
        </el-card>
      </div>

      <!--endprint-->
    </template>

    <template v-else>
      <template slot="title">
        <el-row :gutter="20">
          <el-col :span="12">
            <div>盘库订单</div>
          </el-col>
          <el-col :span="12">
            <div style="position: absolute">
              <img v-if="barcodeUrl != ''" v-bind:src="barcodeUrl"/>
            </div>

          </el-col>
        </el-row>
      </template>

      <el-form :model="dataForm" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
               label-width="80px">
        <el-form-item label="订单号" prop="orderNo">
          <span style="color: red;font-size: 18px;font-weight: bolder">{{dataForm.orderNo}}</span>
        </el-form-item>
        <el-form-item label="物料信息" prop="status">
          <el-transfer
            filterable
            :filter-method="filterMethod"
            filter-placeholder="请输入物料名称"
            v-model="itemSelectValue"
            :data="itemSelectData">
          </el-transfer>
        </el-form-item>
        <el-form-item label="物料详情" prop="status">
          <template>
            <el-table
              :data="dataForm.orderItems"
              border
              height="360"
              style="width: 100%">
              <el-table-column
                prop="name"
                label="名称"
              >
              </el-table-column>

              <el-table-column
                prop="guid"
                label="条码"
              >
              </el-table-column>

              <el-table-column
                prop="batchNo"
                label="批次编码"
              >
              </el-table-column>
              <el-table-column
                prop="amount"
                label="数量"
              >
              </el-table-column>
            </el-table>
          </template>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
    </template>

  </el-dialog>

</template>
<style>
  .el-transfer-panel{
    width: 230px;
  }
</style>
<script>
  export default {
    data() {
      return {
        itemSelectData: [],
        itemSelectValue: [],
        visible: false,
        isView: false,
        barcodeUrl: '',
        dataForm: {
          id: '',
          orderNo: '',
          orderItems: []
        },
        dataView: {
          orderNo: '',
          orderItems: []
        }

      }
    },
    computed: {},
    watch: {
      itemSelectValue(value) {
        const a = [];
        value.forEach(x => {
          let p = JSON.parse(x)
          p.quantity = p.amount
          a.push(p)
        })
        this.dataForm.orderItems = a
      },
      'dataForm.orderNo'() {
        this.getBarcode(this.dataForm.orderNo)
      }

    },
    methods: {
      init(id) {
        this.itemSelectValue=[]
        this.barcodeUrl = '';
        this.dataForm.id = id || 0
        this.dataForm.orderNo = '';
        this.visible = true
        if (this.dataForm.id > 0) {
          this.isView = true;
          this.getCheckOrder()
        } else {
          this.isView=false
          this.getOrderNo()
          this.listItem()
        }


      },
      filterMethod(query, item) {
        return item.label.indexOf(query) > -1
      },

      //打印
      doPrint() {
        var element = document.getElementById('print')
        // element.style.width = '50px'
        // element.style.height = '30px'
        var newstr = element.innerHTML
        // var newstr = document.getElementById('printcode').innerHTML
        console.log(newstr)
        document.body.innerHTML = newstr
        window.print()
        // 重新加载页面，以刷新数据
        window.location.reload()
      },
      // 出库单详情
      getCheckOrder() {
        this.$http({
          url: this.$http.adornUrl('/api/getCheckOrder'),
          method: 'get',
          params: {id: this.dataForm.id}
        }).then(({data}) => {
          this.dataView = data.data
          this.getBarcode(data.data.orderNo)
        })
      },

      // 查询物料列表
      listItem() {
        this.$http({
          url: this.$http.adornUrl('/api/listItemsForCheck'),
          method: 'post'
        }).then(({data}) => {
          this.itemSelectData = data.data.map((x) => {
            return {key: JSON.stringify(x), label: `${x.name}-${x.batchNo}`}
          })
        }).catch(e => {
          this.$message.info(e);
        })
      },
      // 获取单号
      getOrderNo() {
        this.$http({
          url: this.$http.adornUrl('/api/getCorderNo'),
          method: 'get'
        }).then(({data}) => {
          this.dataForm.orderNo = data.data
        }).catch(e => {
          this.$message.info(e);
        })
      },

      // 获取一维条码
      getBarcode(orderNo) {
        if (orderNo != '') {
          this.$http({
            url: this.$http.adornUrl('/api/getBarcode'),
            method: 'get',
            params: {orderNo: orderNo}
          }).then(({data}) => {
            this.barcodeUrl = this.$http.adornUrl(data.url)
          });
        }

      },
      // 表单提交
      dataFormSubmit() {
        // this.$refs['dataForm'].validate((valid) => {
        //   if (valid) {
        this.$http({
          url: this.$http.adornUrl(`/generator/checkorder/submitCheckOrder`),
          method: 'post',
          data: this.$http.adornData({
            'orderNo': this.dataForm.orderNo,
            'orderItems': this.dataForm.orderItems,
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.visible = false
                this.$emit('refreshDataList')
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      }
      // })
      // }
    }
  }
</script>
